<template>
  <el-dialog
    title="添加参赛人员"
    v-model="show"
    @opened="handleOpenModaled"
  >
    <div class="content-heder-container">
      <el-space>
        <el-input
          v-model="query_data.studentName"
          placeholder="搜索姓名"
        ></el-input>
        <el-input
          v-model="query_data.phone"
          placeholder="搜索手机号"
        ></el-input>
        <el-button
          size="large"
          :icon="Search"
          circle
          @click="()=>handleLoad(true)"
        />
        <el-button
          size="large"
          :icon="Delete"
          circle
          @click="handleRest"
        />
      </el-space>

    </div>
    <el-table :data="data">
      <el-table-column
        prop="date"
        label="赛事编号"
      />
      <el-table-column
        prop="date"
        label="赛事名称"
      />
      <el-table-column
        prop="date"
        label="比赛时间"
      />
      <el-table-column
        prop="date"
        label="比赛地点"
      />
      <el-table-column
        prop="date"
        label="参赛人数"
      />
      <el-table-column
        prop="date"
        label="待填写ID码人数"
      />
      <el-table-column
        prop="date"
        label="操作"
      />

    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        @current-change="handlePage"
      />
    </div>
  </el-dialog>
</template>

<script  setup>
import { usePage } from "@/hooks/usePage"
import { GetNotRegisteredStudentsApi } from "@/api/manage/institution"
import { ref } from "vue"
import { Search, Delete } from "@element-plus/icons-vue"
const props = defineProps({
  eventId: Number | String
})
const show = ref(false);
const {
  total,
  data,
  loading,
  query_data,
  handleLoad,
  handlePage
} = usePage({
  api_fn: GetNotRegisteredStudentsApi,
  q_data: {
    studentName: '',
    phone: '',
    eventId: props.eventId
  }
})
const handleOpenModaled = () => {
  handleLoad(true);
}
const handleOpenModal = () => {
  show.value = true;
}
defineExpose({
  handleOpenModal
})
</script>

<style lang="scss" scoped>
.content-heder-container {
  padding: 16px 0;
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
</style>